<template>
  <div class="vertical-layout">
    <div class="s-header">
      <div class="_window-bar g-jc-sb g-pd-lr-8 g-ai-c">
        <div class="_window-logo"> {{simUIData[0]?.showText}} </div>
        <div class="_window-btns g-jc-sb">
          <div class="_window-btn _close-btn g-pd-lr-4 g-pointer" @click="onWindowClick('close')">
            <img src="statics/images/mainpage/wclose.svg" />
          </div>
        </div>
      </div>
    </div>
    <div class="s-content">
      <div class="_sim-frame">
        <UINode
          v-for="node in simUIData"
          :key="node.modelId"
          :shape-node="node"
        />
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { onMounted, reactive } from "vue";
import UINode from "./UINode.vue";
import * as remote from "@electron/remote";
import { controller } from "@/engine/Controller";
import { ipcRenderer } from "electron";
import { IpcUpdateUIFrameRenderData } from "@/engine/types/SimUI";
import { SimFrameToSubChannel, SimSubwinMsgToSimWin } from "@/engine/types/Win";

const onWindowClick = (eventType: any) => {
  if (!app.global.isElectron) return;
  const win: Electron.BrowserWindow = remote.BrowserWindow.getFocusedWindow() as Electron.BrowserWindow;
  if (eventType === "close") {
    win.close();
  }
};

const simUIData = reactive(controller.simUIService.simUIData);

onMounted(async () => {
  await controller.simUIService.frameInit();
  ipcRenderer.on(SimFrameToSubChannel.UI_Frame_Change, (event, data: IpcUpdateUIFrameRenderData) => {
    console.log('get ui change data: ', data);
    controller.simUIService.ipcUpdateSimUIData(data);
  });
  ipcRenderer.on(SimFrameToSubChannel.ImageSwitcherSwitch, (event: Event, data: string) => {
    controller.simUIService.changeSimUIDataBg(data);
  });

  // end position
  controller.winService.simSubWinSendInfoToSimWin({ type: SimSubwinMsgToSimWin.SubMounted });
});

</script>
<style lang="scss" scoped>
.vertical-layout {
	height: 100%;

	.s-header {
		height: 40px;
		._window-bar {
			-webkit-app-region: drag;
			background: #3561a8;
			height: 40px;
			text-align: center;
			._window-btns {
				-webkit-app-region: no-drag;
				._window-btn {
					cursor: pointer;
					&:hover {
						background: #409eff;
					}
				}
			}
			._window-logo {
				color: white;
			}
		}
	}
	.s-content {
		height: calc(100% - 40px);
    ._sim-frame {
      width:100%;
      height: 100%;
      position: relative;
      overflow: auto;
    }
	}
}
</style>
